import { StoreProvider as MobxStoreProvider } from "@/stores/mobx/index";
import { useStore } from "@/stores/mobx";
import LikeCounter from "@/components/LikeCounter";
import { observer } from "mobx-react-lite";
import Todos from "@/components/Todos";
// import type { IProps } from "@/types";

const MobxContent = observer(() => {
  const { counterStore, todosStore } = useStore();
  // console.log(counterStore, dispose, initialize, todoStore, uiStore, userStore);
  return (
    <div className="flex flex-col w-1/2 mx-auto">
      <div className="p-4 mt-4 bg-amber-100 rounded-2xl">
        <h3 className="mb-2">计数器</h3>
        <LikeCounter
          likeCount={counterStore.count}
          incrementCount={counterStore.increment}
          decrementCount={counterStore.decrement}
        />
      </div>
      <div className="p-4 mt-4 bg-amber-100 rounded-2xl">
        <Todos
          filter={todosStore.filter}
          filteredTodos={todosStore.filteredTodos}
          activeTodoCount={todosStore.activeTodoCount}
          addTodo={todosStore.addTodo}
          toggleTodo={todosStore.toggleTodo}
          removeTodo={todosStore.removeTodo}
          setFilter={todosStore.setFilter}
          clearCompleted={todosStore.clearCompleted}
        />
      </div>
    </div>
  );
});

function MobxPage() {
  return (
    <MobxStoreProvider>
      <MobxContent />
    </MobxStoreProvider>
  );
}
export default MobxPage;
